<template>
  <div>
    <div id="order"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ecthree } from "@/api/echarsapi/scone";
export default {
  data() {
    return {
      day: [],
      amount: [],
      products: [],
      orders: [],
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.echart();
  },
  methods: {
    getdata() {
      ecthree().then((res) => {
        // console.log(res.data);
        this.day = res.data.rows.map((item) => item.day);
        this.amount = res.data.rows.map((item) => item.amount);
        this.products = res.data.rows.map((item) => item.products);
        this.orders = res.data.rows.map((item) => item.orders);
        // console.log(this.day, this.users, this.amount, this.orders);
        this.echart();
      });
    },
    echart() {
      var myChart = echarts.init(document.getElementById("order"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单量", "下单货品数量", "下单货品总额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.day,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单量",
            type: "line",
            data: this.orders,
            smooth: true,
            color:'#52D4B0'
          },
          {
            name: "下单货品数量",
            type: "line",
            data: this.products,
            smooth: true,
            color:'#6AB1F0'
          },
          {
            name: "下单货品总额",
            type: "line",
            data: this.amount,
            smooth: true,
            color:'#F06F87'
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#order {
  width: 100%;
  height: 500px;
}
</style>